import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_demotest/models/refine_user_info.model.dart';
import 'package:image_picker/image_picker.dart';
import 'package:provider/provider.dart';

import '../view_models/refine_user_info.view.model.dart';

class RefineUserInfo extends StatelessWidget {
  const RefineUserInfo({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => RefineUserInfoViewModel(),
      child: Scaffold(
        appBar: AppBar(),
        body: const RefineUserInfoForm(),
      ),
    );
  }
}

class RefineUserInfoForm extends StatefulWidget {
  const RefineUserInfoForm({super.key});

  @override
  RefineUserInfoFormState createState() => RefineUserInfoFormState();
}

class PageStyle {
  String avatar;
  Color defaultBackground;
  Color defaultIconColor;
  Color defaultFontColor;
  Color selectBackground;
  Color selectIconColor;
  Color selectFontColor;

  PageStyle({
    required this.avatar,
    required this.defaultBackground,
    required this.defaultIconColor,
    required this.defaultFontColor,
    required this.selectBackground,
    required this.selectIconColor,
    required this.selectFontColor,
  });
}

class RefineUserInfoFormState extends State<RefineUserInfoForm> {
  late TextEditingController nameController;
  late String avatarController;
  late Sex sexController;

  @override
  void initState() {
    super.initState();
    final refineUserInfoViewModel =
        Provider.of<RefineUserInfoViewModel>(context, listen: false);
    avatarController = refineUserInfoViewModel.refineUserInfoForm['avatar'];
    sexController = refineUserInfoViewModel.refineUserInfoForm['sex'];
    nameController = TextEditingController(
        text: refineUserInfoViewModel.refineUserInfoForm['name']);
  }

  @override
  void dispose() {
    super.dispose();
    nameController.dispose();
  }

  void generateName() {
    final refineUserInfoViewModel =
        Provider.of<RefineUserInfoViewModel>(context, listen: false);
    refineUserInfoViewModel.generateName();
    nameController.text = refineUserInfoViewModel.refineUserInfoForm['name'];
  }

  @override
  Widget build(BuildContext context) {
    final refineUserInfoViewModel =
        Provider.of<RefineUserInfoViewModel>(context);
    final ImagePicker picker = ImagePicker();
    final PageStyle maleStyle = PageStyle(
        avatar: 'assets/images/avatar-male.png',
        defaultBackground: Color(0xfff3f2f7),
        defaultIconColor: Color(0xff007AFF),
        defaultFontColor: Colors.black38,
        selectBackground: Color(0xff007AFF),
        selectIconColor: Colors.white,
        selectFontColor: Colors.white);
    final PageStyle femaleStyle = PageStyle(
        avatar: 'assets/images/avatar-female.png',
        defaultBackground: Color(0xfff3f2f7),
        defaultIconColor: Color(0xfffe4d93),
        defaultFontColor: Colors.black38,
        selectBackground: Color(0xfffe4d93),
        selectIconColor: Colors.white,
        selectFontColor: Colors.white);

    return Container(
      padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 0),
      child: SizedBox(
        width: double.infinity,
        height: 520,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              '完善资料有惊喜',
              style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 30),
            GestureDetector(
              onTap: () async {
                final XFile? image =
                    await picker.pickImage(source: ImageSource.gallery);
                String path = image?.path ?? avatarController;
                refineUserInfoViewModel.setAvatar(path);
                avatarController =
                    refineUserInfoViewModel.refineUserInfoForm['avatar'];
              },
              child: Stack(
                alignment: Alignment.bottomCenter,
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: avatarController.startsWith('assets/')
                        ? Image.asset(
                            avatarController,
                            width: 85,
                            height: 85,
                          )
                        : Image.file(
                            File(avatarController),
                            width: 85,
                            height: 85,
                          ),
                  ),
                  Positioned(
                    bottom: 0,
                    child: ClipRRect(
                      borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(10),
                        bottomRight: Radius.circular(10),
                      ),
                      child: Container(
                        width: 85,
                        height: 20,
                        decoration:
                            BoxDecoration(color: Colors.black.withOpacity(0.5)),
                        child: Center(
                          child: Text(
                            '换头像',
                            style: TextStyle(
                              fontSize: 10,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: 15),
            Row(
              children: [
                Expanded(
                  child: TextButton(
                    onPressed: () {
                      refineUserInfoViewModel.setAvatar(maleStyle.avatar);
                      refineUserInfoViewModel.setSex(Sex.male);
                      avatarController =
                          refineUserInfoViewModel.refineUserInfoForm['avatar'];
                      sexController =
                          refineUserInfoViewModel.refineUserInfoForm['sex'];
                      generateName();
                    },
                    style: ButtonStyle(
                      padding: WidgetStateProperty.all(
                          EdgeInsets.symmetric(vertical: 13)),
                      shape: WidgetStateProperty.all(
                        RoundedRectangleBorder(
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(25),
                            topRight: Radius.circular(7),
                            bottomLeft: Radius.circular(25),
                            bottomRight: Radius.circular(7),
                          ),
                        ),
                      ),
                      backgroundColor: WidgetStateProperty.all(
                          sexController == Sex.male
                              ? maleStyle.selectBackground
                              : maleStyle.defaultBackground),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.male,
                            color: sexController == Sex.male
                                ? maleStyle.selectIconColor
                                : maleStyle.defaultIconColor),
                        SizedBox(width: 10),
                        Text(
                          '男生',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: sexController == Sex.male
                                ? maleStyle.selectFontColor
                                : maleStyle.defaultFontColor,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                SizedBox(width: 25),
                Expanded(
                  child: TextButton(
                    onPressed: () {
                      refineUserInfoViewModel.setAvatar(femaleStyle.avatar);
                      refineUserInfoViewModel.setSex(Sex.female);
                      avatarController =
                          refineUserInfoViewModel.refineUserInfoForm['avatar'];
                      sexController =
                          refineUserInfoViewModel.refineUserInfoForm['sex'];
                      generateName();
                    },
                    style: ButtonStyle(
                      padding: WidgetStateProperty.all(
                          EdgeInsets.symmetric(vertical: 13)),
                      shape: WidgetStateProperty.all(
                        RoundedRectangleBorder(
                          borderRadius: BorderRadius.only(
                            topRight: Radius.circular(25),
                            topLeft: Radius.circular(7),
                            bottomRight: Radius.circular(25),
                            bottomLeft: Radius.circular(7),
                          ),
                        ),
                      ),
                      backgroundColor: WidgetStateProperty.all(
                          sexController == Sex.female
                              ? femaleStyle.selectBackground
                              : femaleStyle.defaultBackground),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.female,
                            color: sexController == Sex.female
                                ? femaleStyle.selectIconColor
                                : femaleStyle.defaultIconColor),
                        SizedBox(width: 10),
                        Text(
                          '女生',
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              color: sexController == Sex.female
                                  ? femaleStyle.selectFontColor
                                  : femaleStyle.defaultFontColor),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(height: 15),
            Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Expanded(child: Container(height: 1, color: Colors.black12)),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 7),
                    child: Text(
                      '性别提交后不可修改',
                      style: TextStyle(fontSize: 10, color: Colors.black26),
                    ),
                  ),
                  Expanded(child: Container(height: 1, color: Colors.black12)),
                ],
              ),
            ),
            SizedBox(height: 15),
            Stack(
              children: [
                TextField(
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: Color(0xFFF3F2F7),
                      hintText: '输入昵称',
                      border: InputBorder.none,
                      contentPadding:
                          EdgeInsets.symmetric(vertical: 10, horizontal: 15),
                      enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(30),
                        borderSide: BorderSide(color: Colors.transparent),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(30),
                        borderSide: BorderSide(color: Colors.transparent),
                      ),
                    ),
                    maxLength: 10,
                    controller: nameController,
                    buildCounter: (BuildContext context,
                            {int? currentLength,
                            int? maxLength,
                            bool? isFocused}) =>
                        null,
                    style:
                        TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
                Positioned(
                  right: 7,
                  child: TextButton(
                      onPressed: generateName,
                      child: Row(
                        children: [
                          Text(
                            '随机',
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 16,
                                color: Color(0xffdb3056)),
                          ),
                          Icon(
                            Icons.refresh,
                            color: Color(0xffdb3056),
                          )
                        ],
                      )),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}
